<template>
	<view class="root">

		<tip-roll :data="deptTrees" title="迁出地" :show="isShowMask" @changeState="changeMaskState"></tip-roll>

		<view class="from">
			<view style="margin: 30rpx; font-size: 40rpx;" class="blod">迁出地</view>
			<view @tap="showMask()" class="w9" style="  border-radius: 15rpx; height: 80rpx; background-color: #F8F8F8;">
				<text style=" margin-left: 5rpx; color: #333333; line-height: 80rpx; display: block;">
					{{migrate}}
				</text>
			</view>
			<cross-line style="width: 750rpx;"></cross-line>

			<view v-if="isWai">
				<view style="margin: 30rpx; font-size: 40rpx;" class="blod">开户行类型</view>
				<view class="w9" style="  border-radius: 15rpx; height: 80rpx; background-color: #F8F8F8;">

					<picker @change="bindPickerChange" mode="selector" range-key="bankName" :value="bankIndex" :range="bankList">
						<text style=" margin-left: 15rpx; color: #333333; line-height: 80rpx; display: block;">
							{{bankList[bankIndex].bankName || ''}}
						</text>
					</picker>


				</view>
				<cross-line style="width: 750rpx;"></cross-line>
			</view>

			<view v-if="isWai">
				<view style="margin: 30rpx; font-size: 40rpx;" class="blod">开户行账号</view>
				<view class="w9" style="  border-radius: 15rpx; height: 80rpx; background-color: #F8F8F8;">
					<input @input="changeBankNum" :value="bankNum" type="number" placeholder="请输入开户行账号" style=" height: 80rpx; width: 95%; margin:0 auto; color: #333333; line-height: 80rpx; display: block;">
					</input>
				</view>
				<cross-line style="width: 750rpx;"></cross-line>
			</view>

			<view v-if="isWai"> 
				<view style="margin: 30rpx; font-size: 40rpx;" class="blod">户口本所在页照片</view>
				<view v-if="showImg" @tap="choiceImg" class="w9" hover-class="hover" hover-stay-time="50" style=" position: relative; border-radius: 15rpx; height: 400rpx; background-color: #F8F8F8;">
					<icon class="icon icon-jiahao iconfont"></icon>
				</view>
				<view v-else @tap="choiceImg" class="w9" hover-class="hover" hover-stay-time="50" style=" position: relative; border-radius: 15rpx; height: 400rpx;">
					<image style="width: 100%; height: 100%;" :src="imgUrl"></image>
				</view>
				<cross-line style="width: 750rpx;"></cross-line>
			</view>

			<view>
				<view style="margin: 30rpx; font-size: 40rpx;" class="blod">现居地址</view>
				<view class="w9" style=" position: relative; border-radius: 15rpx; height: 400rpx; background-color: #F8F8F8;">
					<view style="width: 1rpx; height: 15rpx;"></view>
					<textarea placeholder="请输入现居地址" @input="changeNewAddress" maxlength="-1" style="display: block; width: 95%; height: 370rpx; margin: auto;"></textarea>
				</view>
			</view>
		</view>
		<view style="width: 500rpx; margin: 0 auto;">
			<butt @clickButt="submit" width="500" style="margin: 0 auto; position: relative; z-index: 100;"></butt>
		</view>

	</view>
</template>

<script>
	import crossLine from "../../../components/ui/tg-cross-line.vue"
	import butt from "../../../components/ui/myButt.vue"
	import tipRoll from "../../../components/ui/tg-tip-roll.vue"
	export default {
		components: {
			tipRoll,
			crossLine,
			butt
		},
		computed:{
			showImg:{
				get(){
					console.log(this.imgUrl == '')
					return this.imgUrl == ''
				}
			}
		},
		async onLoad() {
<<<<<<< HEAD
			// uni.showLoading({
			// 	mask: true,
			// 	title: '加载中'
			// })
			// var res = await this.$api.getDeptTrees({});
			// this.deptTrees = res.data.result;
			// //console.log(this.deptTrees)
			// uni.hideLoading();
=======
			uni.showLoading({
				mask: true,
				title: '加载中'
			})
			var res = await this.$api.getDeptTrees({});
			this.deptTrees = res.data.result;
			console.log(this.deptTrees)
			uni.hideLoading();
>>>>>>> parent of 9c00801 (2.0 老人，管理员，新的ui)
		},
		data() {
			return {
				isShowMask: false,
				deptTrees: [],
				isWai: false,
				migrate: '请选择迁出地',
				bankNum: '',
				bankList: [],
				imgUrl:'',
				bankIndex: 0,
				newAddress:'',
				dept:'',
				name:'',
				immigration_village:''

			}
		},
		methods: {
			changeNewAddress(e){
				this.newAddress = e.detail.value
			},
			async choiceImg(){
				var that = this
				uni.chooseImage({
					count:1,
					async success(e) {
						console.log(e)
						that.imgUrl = e.tempFilePaths[0]
						var res = await that.$api.UploadApplicationPic('file',that.imgUrl)
						that.imgUrl = JSON.parse(res.data).result
					}
				})
			},
			changeBankNum(e){
				this.bankNum = e.detail.value
			},
			async submit() {
				
				
				var data = {
					"bankNum": this.bankNum,
					"bankType": this.bankList[this.bankIndex].bankName,
					"immi_province": this.dept == "9999999999999"?1:0,
					"immigration_dept": this.dept,
					"immigration_name": this.name,
					"immigration_village":this.immigration_village,
					"newAddress": this.newAddress,
					"processKey": "immigration",
					"processName": "高龄老人迁出",
					"residence_photo": this.imgUrl
				}
				console.log(data)
				
<<<<<<< HEAD
				// var res = await this.$api.appCommitApplyImmigration(data);
				//console.log(res)
=======
				var res = await this.$api.appCommitApplyImmigration(data);
				console.log(res)
>>>>>>> parent of 9c00801 (2.0 老人，管理员，新的ui)
				
				if(res.statusCode == 200){
					if(res.data.code == 200){
						uni.showModal({
							title:`提示`,
							content:res.data.message,
							success() {
								uni.navigateBack({
									
								})
							}
						})
					}else{
						uni.showModal({
							title:`提示`,
							content:res.data.message,
							success() {
								uni.navigateBack({
									
								})
							}
						})
					}
					
				}else{
					uni.showModal({
						title:`提示`,
						content:res.data.message,
						success() {
							uni.navigateBack({
								
							})
						}
					})
				}
			},
			bindPickerChange(e) {
				this.bankIndex = e.detail.value
			},
			showMask() {
				this.isShowMask = true
			},
<<<<<<< HEAD
			// async changeMaskState(e) {
			// 	//console.log('changeMaskState触发了')
			// 	this.isShowMask = false
			// 	//console.log(e)
			// 	if(e.checkedIndex.length != 1){
			// 		var str = ''
			// 		e.checked.forEach((ele, index) => {
			// 			str += ele.label
			// 			if (index != e.checked.length - 1) {
			// 				str += '/'
			// 			}
			// 		})
			// 		this.migrate = str
			// 		this.dept= e.checked[0].value == "9999999999999" ? "9999999999999" : e.checked[2].value
			// 		this.name= e.checked[0].value == "9999999999999" ? "外市" : e.checked[2].label
			// 		this.immigration_village = e.checked[3].value
			// 		if(this.dept != "9999999999999"){
			// 			//获取开户行
			// 			var deptId = e.checked[1].value
						
			// 			var item = await this.$api.getBankTypeByDeptId({
			// 				deptId
			// 			});
			// 			this.bankList = item.data.result
			// 			//console.log(this.bankList)
			// 		}
=======
			async changeMaskState(e) {
				console.log('changeMaskState触发了')
				this.isShowMask = false
				console.log(e)
				if(e.checkedIndex.length != 1){
					var str = ''
					e.checked.forEach((ele, index) => {
						str += ele.label
						if (index != e.checked.length - 1) {
							str += '/'
						}
					})
					this.migrate = str
					this.dept= e.checked[0].value == "9999999999999" ? "9999999999999" : e.checked[2].value
					this.name= e.checked[0].value == "9999999999999" ? "外市" : e.checked[2].label
					this.immigration_village = e.checked[3].value
					if(this.dept != "9999999999999"){
						//获取开户行
						var deptId = e.checked[1].value
						
						var item = await this.$api.getBankTypeByDeptId({
							deptId
						});
						this.bankList = item.data.result
						console.log(this.bankList)
					}
>>>>>>> parent of 9c00801 (2.0 老人，管理员，新的ui)
					
			// 		this.isWai = e.checked[0].value == "9999999999999" ? false : true
								
<<<<<<< HEAD
			// 	}else{
			// 		this.migrate = "外市"
			// 		this.dept="9999999999999"
			// 		this.name="外市"
			// 		this.isWai =false
			// 		//console.log('this.isWai = ',this.isWai)
			// 	}
			// }
=======
				}else{
					this.migrate = "外市"
					this.dept="9999999999999"
					this.name="外市"
					this.isWai =false
					console.log('this.isWai = ',this.isWai)
				}
			}
>>>>>>> parent of 9c00801 (2.0 老人，管理员，新的ui)
		}
	}
</script>

<style>
	.root::after {
		content: "";
		width: 100rpx;
		height: 50rpx;
		display: block;
	}

	.root {
		position: relative;
	}

	.from::after {
		content: "";
		width: 100rpx;
		height: 50rpx;
		display: block;
	}

	.from {
		position: relative;
		z-index: 100;
	}

	.icon {
		font-size: 50rpx;
		color: #888888;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
</style>
